<template>
    <div class="bui-box footer-bar">
        <div class="bui-left footer-bar-left">
            <a v-if="item.tag_style"
               class="footer-bar-action tag"
               :class="item.tag_style"
               :href="item.tag_url" target="_blank"
               ga_event="article_tag_click">{{item.chinese_tag}}</a>

            <template v-if="item.media_url">
                <a class="footer-bar-action media-avatar" :href="item.media_url" target="_blank" :ga_event="item.article_genre + '_avatar_click'">
                    <img v-lazy="item.media_avatar_url" />
                </a>
                <a class="footer-bar-action source" :href="item.media_url" target="_blank" :ga_event="item.article_genre + '_name_click'">&nbsp;{{item.source}}&nbsp;&sdot;</a>
                <a class="footer-bar-action source" :href="item.source_url + '/#comment_area'" target="_blank" :ga_event="item.article_genre + '_comment_click'">&nbsp;{{item.comments_count}}评论&nbsp;&sdot;</a>
            </template>
            <template v-else>
                <a class="footer-bar-action media-avatar"
                   :class="item.avatar_style"
                   :href="'/search/?keyword=' + item.source"
                   :ga_event="item.article_genre + '_avatar_click'">{{item.source_tag}}</a>
                <a class="footer-bar-action source" :href="'/search/?keyword=' + item.source" target="_blank" :ga_event="item.article_genre + '_name_click'">&nbsp;{{item.source}}&nbsp;&sdot;</a>
            </template>

            <span class="footer-bar-action">&nbsp;{{item.time_ago}}</span>
            <span v-if="item.is_related" class="footer-bar-action recommend">相关</span>
            <span v-if="item.hot" class="footer-bar-action hot">热</span>
            <a v-if="item.ad_label" class="footer-bar-action ad" target="_blank" href="https://ad.toutiao.com/promotion/?source2=pcfeedadtag">{{item.ad_label}}</a>
        </div>
        <div v-if="item.group_id" class="bui-right">
            <Dislike :group_id="item.group_id" :dislikeUrl="dislikeUrl" :getUserInfoUrl="getUserInfoUrl"></Dislike>
        </div>
    </div>
</template>

<style lang="less">
    @import './style/tag-style.less';
    @import './style/avatar-style.less';

    .footer-bar {
        font-size: 12px;
        color: #999;
        margin-top: 10px;

        &-left {
            display: inline-block;
            font-size: 0;
            vertical-align: middle;
            line-height: 20px;
        }

        &-action {
            display: inline-block;
            font-size: 14px;
            line-height: 1;
            vertical-align: middle;

            &.source {
                color: #777;
                font-size: 14px;

                &:hover {
                    color: #406599;
                }
            }
            &.media-avatar {
                color: #fff;
                margin-right: 2px;
                width: 18px;
                height: 18px;
                line-height: 18px;
                text-align: center;
                font-size: 12px;
                border-radius: 50%;
                background-color: #eee;
                overflow: hidden;

                >img {
                    width: 100%;
                    height: 100%;

                    &[lazy=loading] {
                        width: 10px;
                        height: 100%;
                        margin: auto;
                    }
                }
            }
            &.tag {
                font-size: 12px;
                color: #eee;
                margin-right: 10px;
                padding: 1px 2px;
                border: 1px solid #eee;
            }
            &.hot {
                font-size: 14px;
                color: #ed4040;
                margin-left: 8px;
            }
            &.recommend {
                font-size: 12px;
                color: #2a90d7;
                border: 1px solid #2a90d7;
                padding: 1px 2px;
                margin-left: 8px;
            }
            &.ad {
                font-size: 14px;
                color: #2a90d7;
                margin-left: 8px;
            }
        }
    }
</style>

<script>
  import Dislike from './dislike.vue';

  export default {
    props: {
      item: {
        type: Object,
        default: {}
      },
      dislikeUrl: {
        type: String,
        default: '/api/dislike/'
      },
      getUserInfoUrl: {
        type: String,
        default: '/user/info/'
      }
    },
    computed: {
    },
    components: {
      Dislike
    }
  };
</script>



// WEBPACK FOOTER //
// footerBar.vue?52d97978